<template>
  <div>
    <!-- 面包屑导航区 -->
	<el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>人员添加</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
	<el-card>
		<div class="box">
			<div class="top">
				<el-tooltip class="item" effect="dark" content="人员添加" placement="top-start">
					<el-button>人员添加</el-button>
				</el-tooltip>
			</div>
		</div>
	</el-card>
    <el-card>
      <!-- Tab栏 -->
       <el-form  :model="addsForm" :rules="addsFormRules" ref="addsFormRef" label-width="100px" >
        <el-tabs :tab-position="'left'">
          
            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入姓名" v-model="addsForm.name"></el-input>
            </el-form-item>
			<el-form-item label="邮箱" prop="email">
			  <el-input placeholder="请输入邮箱" v-model="addsForm.email"></el-input>
			</el-form-item>
			<el-form-item label="电话号" prop="phone">
			  <el-input placeholder="请输入电话号" v-model="addsForm.phone"></el-input>
			</el-form-item>
			<el-form-item label="所属项目" prop="belong">
			  <el-input placeholder="请输入所属项目" v-model="addsForm.belong"></el-input>
			</el-form-item>
			<el-form-item label="职务" prop="duty">
				<el-select v-model="addsForm.duty" placeholder="请选择职务">
					<el-option label="项目经理" value="项目经理"></el-option>
					<el-option label="项目成员" value="项目成员"></el-option>
				</el-select>
			</el-form-item>
            
			
			
		 </el-form-item>
		  <!-- 确认按钮 -->
             <el-button type="primary" class="btnAdd" @click="addMessage" style="background-color: #FF0000;color: #FFFFFF">确认</el-button> 
			<!-- 取消按钮 -->
		     <el-button type="primary" class="btnAdd" @click="Return" style="background-color: #696969;color=#FFFFFF">取消</el-button> 
          </el-tab-pane>
        </el-tabs>
      </el-form> 
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 添加学习笔记的表单对象
      addsForm: {
		  id:'',
        name: '',
        email: '',
		phone: '',
		belong: '',
		duty: '',
		state:1,
		uid: JSON.parse(window.sessionStorage.getItem('user')).id,
      },
      addsFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
		email: [
		  { required: true, message: '请输入邮箱', trigger: 'blur' }
		],
		phone: [
		  { required: true, message: '请输入电话号', trigger: 'blur' }
		],
		belong: [
		  { required: true, message: '请输入所属项目', trigger: 'blur' }
		],
		duty: [
		  { required: true, message: '请输入职务', trigger: 'blur' }
		],
      },
	  textarea: '',
  }
  },
  created () {
    
  },
  methods: {
    // 添加人员 完成后返回人员管理
    addMessage() {
        this.$refs.addsFormRef.validate(async valid => {
        if (!valid) return this.$message.error('请填写必要的表单项！')
        // 将this.addsForm进行深拷贝
		
        const forms = _.cloneDeep(this.addsForm) 
        const { data: spa } = await this.$http.post("addadmin", forms)
		if(spa == "ok"){
			this.$message.success('人员添加成功!')
			this.$router.push('/user_admin')
		}else{
			this.$message.error('人员添加失败!')
		}
       
      })
    },
	//页面跳转到空间主页
	async Return(){
		this.$router.push('/user_admin')
  },
 },
 }
</script>

<style lang='less' scoped>
      .el-checkbox {
          margin: 0 8px 0 0 !important;
      }
      .previewImg{
          width: 100%;
      }
      .btnAdd{
          margin-top: 15px
      }
</style>